<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        #waterFull {
            width: 800px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        .item {
            flex-basis: 20%;
        }
        img{
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="waterFull">
        <div class="item">
            <div id="box1">
                <img src="./imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div id="box2">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div id="box3">
                <img src="./imgs/12.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div id="box4">
                <img src="./imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div id="box5">
                <img src="./imgs/8.jpg" alt="">
            </div>
        </div>
    </div>
    <script>
        window.onload = function() {
            const imgs = ['./imgs/1.jpg', './imgs/2.jpg', './imgs/3.jpg', './imgs/4.jpg', './imgs/5.jpg','./imgs/6.jpg','./imgs/7.jpg', './imgs/8.jpg', './imgs/9.jpg', './imgs/10.jpg','./imgs/11.jpg','./imgs/12.jpg']
            // 随机获取一张图片的函数
            function randomImg() {
                return imgs[Math.round(Math.random()*11)]
            }
            // 获取屏幕可视高度
            var clientY = document.documentElement.clientHeight
            var timer;
            function waterFull() {
                // 获取图片的元素盒
                var els = Array.from(document.getElementsByClassName('item')) 
                //声明一个数据 收集元素的高度信息
                let arr = []
                els.forEach(item => {
                    let obj = {
                        el: item.getElementsByTagName('div')[0],
                        height: item.getElementsByTagName('div')[0].offsetHeight,
                    }

                    arr.push(obj)
                })
                
                arr.sort((a, b) => {
                    return a.height - b.height
                })
                if(arr[0].height > clientY) {
                    clearInterval(timer)
                } else {
                    // console.log(arr)
                    // 创建一张图片准备加入瀑布流
                    var img = `<img src=${randomImg()}>`
                    // insertAdjacentHTML 在dom中插入元素的方法 beforeEnd afterEnd  beforeBegin afterBegin
                    arr[0].el.insertAdjacentHTML('beforeEnd', img)
                }
                
            }
            timer = setInterval(() => {
                waterFull()
            }, 300);
        }   
    </script>
</body>
</html>